<!DOCTYPE html>
<html style="height: 100%">
 
	<head>
		<meta charset="utf-8">
		<style>
			#header {
				background-color:lightgray;
				color:black;
				text-align:left;
				height: 80px;
			}
			#container {
   				background-color: black;
				background-image:url(bgpic.png);
				background-position:center;
				background-repeat:no-repeat;
			}
		</style>
	</head>

	<body style="height: 100%; margin: 0" >
		<div id="header">
			<h1><a href="http://gallery.china-vo.org/">
				<img src="topNavLogo.png" width="480" height="80"/></a>
			</h1>
		</div>
		
		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="echarts.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			//环形图变量
			var d1 = 335;
			var d2 = 310;
			var d3 = 234;
			var d4 = 135;
			var d5 = 1548;

			app.title = '环形图';
 
			var option = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				color:['#93D8A9','#FFB99D','#AF7DCC','#FFD83D','#bbe2e8'],
				legend: {
					orient: 'vertical',
					left:'5%',
                    top:'30%',
					data: ['直接访问', '微信服务号', '刊物引用', '广告投放', '搜索引擎'],
					textStyle: {
            			color: '#fff',
            			fontSize: 14,
            			fontWeight: 400,
        			}
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['30%', '70%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false,
							position: 'center'
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '30',
								fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [{
							value: d1,
							name: '直接访问'
						},
						{
							value: d2,
							name: '微信服务号'
						},
						{
							value: d3,
							name: '刊物引用'
						},
						{
							value: d4,
							name: '广告投放'
						},
						{
							value: d5,
							name: '搜索引擎'
						}
					]
				}]
			};
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
 
</html>
